<!DOCTYPE html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <link href="/assets/focusManagement.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
  </head>
  <body>
    <main id="webchat"></main>
    <script>
      run(async function () {
        const directLine = await testHelpers.createDirectLineWithTranscript([
          {
            attachments: [
              {
                contentType: 'application/vnd.microsoft.card.adaptive',
                content: {
                  $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
                  body: [
                    {
                      type: 'TextBlock',
                      text: 'Hello, World!'
                    },
                    {
                      id: 'input-1',
                      type: 'Input.Text',
                      placeholder: 'Type something'
                    }
                  ],
                  type: 'AdaptiveCard',
                  version: '1.3'
                }
              }
            ],
            from: { role: 'bot' },
            id: '1',
            timestamp: 0,
            type: 'message'
          }
        ]);
        const store = testHelpers.createStore();

        WebChat.renderWebChat(
          {
            directLine,
            store,
            styleOptions: { subtle: '#666' }
          },
          document.getElementById('webchat')
        );

        await pageConditions.uiConnected();
        await pageConditions.numActivitiesShown(1);

        // GIVEN: An Adaptive Card with a single text box is focused.
        await host.click(document.querySelector('input.ac-textInput'));

        // WHEN: A new message come.
        directLine.activityDeferredObservable.next({
          from: {
            role: 'bot'
          },
          id: '2',
          text: 'Hello, World!',
          timestamp: 1,
          type: 'message'
        });

        // THEN: The focus should still on the text box.
        expect(document.activeElement).toBe(document.querySelector('input.ac-textInput'));
        await host.snapshot();

        // THEN: The active descendant should still on the activity with the Adaptive Card.
        host.sendKeys('ESCAPE');
        expect(pageElements.focusedActivity()).toBe(pageElements.activities()[0]);
        await host.snapshot();
      });
    </script>
  </body>
</html>
